<template>
  <div>
    <!-- 商品分类列表 -->
    <el-table :data="sortDate" border stripe style="width: 100%" :tree-props="{children: 'children'}">>
      <el-table-column type="index" label="#" width="60"> </el-table-column>
      <el-table-column  type="expand">
        <template slot-scope="scope">
         <el-tree :data="scope.row.children" :props="sortProps" row-key="cat_id"></el-tree>
        </template>
      </el-table-column>
      <el-table-column label="分类名称" prop="cat_name">
      </el-table-column>
      <el-table-column prop="roleDesc" label="是否有效"> </el-table-column>
      <el-table-column prop="roleDesc" label="排序"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!-- 修改按钮 -->
          <el-button
            type="warning"
            icon="el-icon-edit"
            circle
            @click="showSortEdit(scope.row)"
          ></el-button>
          <!-- 删除按钮 -->
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click="removeSortEdit(scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  //import 引入组件
  components: {},
  data() {
    return {
      sortDate: [],
      sortProps: {
        label: "cat_name",
        children: "children",
      },
    };
  },
  methods: {
    //获取商品分类列表
    async getCategories() {
      const { data } = await this.$axios.get("/categories", {
        type: [1, 2, 3],
      });
      if (data.meta.status == 200) {
        this.sortDate = data.data;
        // console.log(data.data);
      }
    },
    //修改按钮
    showSortEdit() {},
    //删除按钮
    removeSortEdit() {},
  },
  mounted() {
    this.getCategories();
  },
};
</script>

<style></style>
